<script lang="ts" setup>
import {
  ElButton,
  ElDialog,
  ElDrawer,
  ElForm,
  ElFormItem,
  ElInput,
  ElSegmented,
  ElTable,
  ElTableColumn,
  ElTag,
  FormInstance,
  FormRules,
} from 'element-plus'
import { useDictDataStore } from '../store'
import { computed, reactive, ref } from 'vue'
import { DictData } from '../data'

const data = useDictDataStore()

const title = computed(() => `字典配置 - ${data.dictType}`)

const statusOptions: {
  label: string
  value: 1 | 0
}[] = [
  { label: '启用', value: 1 },
  { label: '禁用', value: 0 },
]

const rules = reactive<FormRules<Pick<DictData, 'status' | 'description' | 'itemLabel' | 'itemValue'>>>({
  itemLabel: [
    {
      required: true,
      whitespace: false,
      message: '字典数据名称不能为空',
      trigger: 'blur',
    },
  ],
  itemValue: [
    {
      required: true,
      whitespace: false,
      message: '字典数据值不能为空',
      trigger: 'blur',
    },
  ],
})

const formRef = ref<FormInstance>()

const onClickSubmit = () => {
  if (!formRef.value) return
  formRef.value.validate((valid) => {
    if (valid) data.onSubmitUpdate()
  })
}

const onResetForm = () => {
  formRef.value?.resetFields()
  data.onResetForm()
}

const onSelectionChange = (selection: DictData[]) => {
  data.selection = selection
}
</script>

<template>
  <ElDrawer v-model="data.drawerOn" :title @close="data.onReset()" class="max-w-[90vw] w-[960px]!">
    <div class="flex flex-col gap-6">
      <div class="flex gap-3">
        <ElButton type="primary" icon="Plus" @click="data.onStartUpdate()">新增</ElButton>
        <ElButton
          icon="Delete"
          type="danger"
          plain
          :disabled="data.selection.length === 0"
          @click="data.onBatchDelete()"
        >
          批量删除
        </ElButton>
      </div>
      <ElTable
        border
        :data="data.records"
        show-overflow-tooltip
        cell-class-name="text-nowrap!"
        @selection-change="onSelectionChange"
      >
        <ElTableColumn align="center" type="selection" width="38" />
        <ElTableColumn align="center" label="字典数据值" prop="itemValue" />
        <ElTableColumn align="center" label="字典数据名称" prop="itemLabel" />
        <ElTableColumn align="center" label="状态" prop="status" #="{ row }">
          <ElTag :type="row.status ? 'success' : 'info'">
            {{ row.status ? '启用' : '禁用' }}
          </ElTag>
        </ElTableColumn>
        <ElTableColumn align="center" label="描述" prop="description" />
        <ElTableColumn align="center" label="更新时间" prop="updatedAt" />
        <ElTableColumn align="center" label="创建时间" prop="createdAt" />
        <ElTableColumn align="center" label="操作" fixed="right" width="106" #="{ row }">
          <ElButton type="primary" link @click="data.onStartUpdate(row as DictData)">修改</ElButton>
          <ElButton type="danger" link @click="data.onDelete(row as DictData)">删除</ElButton>
        </ElTableColumn>
      </ElTable>
    </div>
  </ElDrawer>
  <ElDialog v-model="data.form.on" @close="onResetForm">
    <ElForm ref="formRef" label-width="auto" :model="data.form.items" :rules>
      <ElFormItem label="字典数据值" required prop="itemValue">
        <ElInput v-model="data.form.items.itemValue" />
      </ElFormItem>
      <ElFormItem label="字典数据名称" required prop="itemLabel">
        <ElInput v-model="data.form.items.itemLabel" />
      </ElFormItem>
      <ElFormItem label="字典数据状态" required>
        <ElSegmented v-model="data.form.items.status" :options="statusOptions" />
      </ElFormItem>
      <ElFormItem label="字典数据描述">
        <ElInput v-model="data.form.items.description" type="textarea" />
      </ElFormItem>
    </ElForm>
    <template #footer>
      <ElButton @click="onResetForm">取消</ElButton>
      <ElButton type="primary" @click="onClickSubmit">确定</ElButton>
    </template>
  </ElDialog>
</template>
